<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../../inc.jsp"></jsp:include>
<script type="text/javascript">
	var chartTypes = [ {
		'id' : 'area-basic',
		'text' : 'area-basic'
	}, {
		'id' : 'area-inverted',
		'text' : 'area-inverted'
	}, {
		'id' : 'area-missing',
		'text' : 'area-missing'
	}, {
		'id' : 'area-negative',
		'text' : 'area-negative'
	}, {
		'id' : 'area-stacked',
		'text' : 'area-stacked'
	}, {
		'id' : 'area-stacked-percent',
		'text' : 'area-stacked-percent'
	}, {
		'id' : 'arearange',
		'text' : 'arearange'
	}, {
		'id' : 'arearange-line',
		'text' : 'arearange-line'
	}, {
		'id' : 'areaspline',
		'text' : 'areaspline'
	}, {
		'id' : 'bar-basic',
		'text' : 'bar-basic'
	}, {
		'id' : 'bar-negative-stack',
		'text' : 'bar-negative-stack'
	}, {
		'id' : 'bar-stacked',
		'text' : 'bar-stacked'
	}, {
		'id' : 'box-plot',
		'text' : 'box-plot'
	}, {
		'id' : 'bubble',
		'text' : 'bubble'
	}, {
		'id' : 'bubble-3d',
		'text' : 'bubble-3d'
	}, {
		'id' : 'column-basic',
		'text' : 'column-basic'
	}, {
		'id' : 'column-drilldown',
		'text' : 'column-drilldown'
	}, {
		'id' : 'column-negative',
		'text' : 'column-negative'
	}, {
		'id' : 'column-parsed',
		'text' : 'column-parsed'
	}, {
		'id' : 'column-rotated-labels',
		'text' : 'column-rotated-labels'
	}, {
		'id' : 'column-stacked',
		'text' : 'column-stacked'
	}, {
		'id' : 'column-stacked-and-grouped',
		'text' : 'column-stacked-and-grouped'
	}, {
		'id' : 'column-stacked-percent',
		'text' : 'column-stacked-percent'
	}, {
		'id' : 'columnrange',
		'text' : 'columnrange'
	}, {
		'id' : 'combo',
		'text' : 'combo'
	}, {
		'id' : 'combo-dual-axes',
		'text' : 'combo-dual-axes'
	}, {
		'id' : 'combo-multi-axes',
		'text' : 'combo-multi-axes'
	}, {
		'id' : 'combo-regression',
		'text' : 'combo-regression'
	}, {
		'id' : 'dynamic-click-to-add',
		'text' : 'dynamic-click-to-add'
	}, {
		'id' : 'dynamic-master-detail',
		'text' : 'dynamic-master-detail'
	}, {
		'id' : 'dynamic-update',
		'text' : 'dynamic-update'
	}, {
		'id' : 'error-bar',
		'text' : 'error-bar'
	}, {
		'id' : 'funnel',
		'text' : 'funnel'
	}, {
		'id' : 'gauge-clock',
		'text' : 'gauge-clock'
	}, {
		'id' : 'gauge-dual',
		'text' : 'gauge-dual'
	}, {
		'id' : 'gauge-speedometer',
		'text' : 'gauge-speedometer'
	}, {
		'id' : 'gauge-vu-meter',
		'text' : 'gauge-vu-meter'
	}, {
		'id' : 'line-ajax',
		'text' : 'line-ajax'
	}, {
		'id' : 'line-basic',
		'text' : 'line-basic'
	}, {
		'id' : 'line-labels',
		'text' : 'line-labels'
	}, {
		'id' : 'line-log-axis',
		'text' : 'line-log-axis'
	}, {
		'id' : 'line-time-series',
		'text' : 'line-time-series'
	}, {
		'id' : 'pie-basic',
		'text' : 'pie-basic'
	}, {
		'id' : 'pie-donut',
		'text' : 'pie-donut'
	}, {
		'id' : 'pie-gradient',
		'text' : 'pie-gradient'
	}, {
		'id' : 'pie-legend',
		'text' : 'pie-legend'
	}, {
		'id' : 'polar',
		'text' : 'polar'
	}, {
		'id' : 'polar-spider',
		'text' : 'polar-spider'
	}, {
		'id' : 'polar-wind-rose',
		'text' : 'polar-wind-rose'
	}, {
		'id' : 'renderer',
		'text' : 'renderer'
	}, {
		'id' : 'scatter',
		'text' : 'scatter'
	}, {
		'id' : 'spline-inverted',
		'text' : 'spline-inverted'
	}, {
		'id' : 'spline-irregular-time',
		'text' : 'spline-irregular-time'
	}, {
		'id' : 'spline-plot-bands',
		'text' : 'spline-plot-bands'
	}, {
		'id' : 'spline-symbols',
		'text' : 'spline-symbols'
	}, {
		'id' : 'waterfall',
		'text' : 'waterfall'
	} ];

	function changeChart(value) {
		var chartViewPanel = $("#charts-chartview-layout").layout("panel", "center");
		var chartHref = "${pageContext.request.contextPath }/app/charts/examples/" + value + "/index.htm";
		chartViewPanel.panel("refresh", chartHref);
	}

	$(function() {
		$('#chartType').combobox({
			valueField : 'id',
			textField : 'text',
			editable : false,
			data : chartTypes,
			onChange : function(n, o) {
				changeChart(n);
			}
		});
	});
</script>
</head>
<body>
	<div id="charts-chartview-layout" class="easyui-layout" data-options="fit:true">

		<div data-options="region:'north'" style="height:40px;">
			<div style="padding-top: 10px; padding-left: 20px">
				图表类型： <select id="chartType" style="width:200px;"></select>
			</div>
		</div>

		<div data-options="region:'center'" style="padding:5px;"></div>

	</div>
</body>
</html>